<template>
	<view class="container">
		<view class="item" v-for="item in modules" :key="item.id" @click="jumpToHandler(item.url)">
			<view class="icon">
				<view :class="item.icon"></view>
			</view>
			<view class="name">{{ item.name }}</view>
		</view>
	</view>
	<view class="mainModule">
		<view class="zhangshang main" @click="toService">
			<view class="text">
				<view class="title">
					掌上办事
				</view>
				<view class="desc">
					一键办理事务
				</view>
			</view>
		</view>
		<view class="all main" @click="toList">
			<view class="text">
				<view class="title">
					更多应用
				</view>
				<view class="desc">
					发现更多功能
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";

	const modules = reactive([{
			id: 1,
			name: "教务系统",
			icon: "iconfont icon-jiaowuxitong",
			url: "https://jwxt.wzut.edu.cn",
		},
		{
			id: 2,
			name: "学工系统",
			icon: "iconfont icon-xuegongxitong",
			url: "https://xgxt.wzut.edu.cn/SSO/account/Login",
		},
		{
			id: 3,
			name: "图书馆",
			icon: "iconfont icon-tushuguan",
			url: "https://lib.wzut.edu.cn",
		},
		{
			id: 4,
			name: "课表查询",
			icon: "iconfont icon-kechengbiaonormal",
			url: "/pages/timetable/timetable",
		},
	]);

	const toService = () => {
		uni.navigateTo({
			url: "/pages/onlineService/onlineService"
		})
	}

	const toList = () => {
		uni.navigateTo({
			url: "/pages/moduleList/moduleList"
		})
	}

	const jumpToHandler = (url) => {
		if (url.startsWith("https")) {
			uni.navigateTo({
				url: `/pages/webview/webview?url=${url}`,
			});
		} else {
			uni.navigateTo({
				url
			});
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		height: 160rpx;
		padding: 0 20rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		// border: 1px solid;

		// 四个小模块
		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.name {
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			.icon {
				overflow: visible;
				height: 70rpx;
				width: 70rpx;

				.iconfont {
					padding: 10rpx;
					font-size: 50rpx;
					color: white;
					border-radius: 50%;
				}

				.icon-jiaowuxitong {
					background: #184795;
				}

				.icon-xuegongxitong {
					font-size: 56rpx;
					padding: 10rpx 7rpx 4rpx 7rpx;
					background: #169718;
				}

				.icon-tushuguan {
					font-size: 40rpx;
					padding: 15rpx;
					background: #b87333;
				}

				.icon-kechengbiaonormal {
					background: #9a3913;
				}
			}
		}
	}

	// 主要模块
	.mainModule {
		height: 200rpx;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);


		// 主要模块通用样式
		.main {
			padding: 20rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			color: white;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.text {
				text-align: right;

				.title {
					font-size: 40rpx;
					font-weight: bold;
				}

				.desc {
					font-size: 24rpx;
				}
			}
		}

		.zhangshang {
			margin-right: 10rpx;
			background: linear-gradient(to right, transparent, rgba(24, 71, 149, 1.0) 60%), url("@/static/module1.jpg");
			background-position: left bottom;
			// background-repeat: no-repeat;
			background-size: auto;
		}

		.all {
			margin-left: 10rpx;
			background: linear-gradient(to right, transparent, rgba(51, 149, 75, 1.0) 50%), url("@/static/module2.jpg");
			background-position: left center;
			background-repeat: no-repeat;
			background-size: contain;
		}
	}
</style>
